<template>
    <view class="page-wrap">
        <Headers v-if="nickName" :headername="nickName" :placeHolderHeight="placeHolderHeight" :barHeight="barHeight"
            :bartops="bartops" :gohide="gohide" />
        <Headers v-else :headername="'首页'" :placeHolderHeight="placeHolderHeight" :barHeight="barHeight"
            :bartops="bartops" :gohide="gohide" />
        <view class="nav-list" @tap="goNavItemPage">
            <block v-for="(item, index) in navList" :key="index">
                <view class="nav-box" :data-url="item.url">
                    <image class="nav-icon" :src="item.navIcon" :data-url="item.url"></image>
                    <text class="nav-text" :data-url="item.url">{{ item.navText }}</text>
                </view>
            </block>
        </view>
        <view class="store-operation">
            <view class="title-box">
                <view class="title-spot"></view>
                <text class="title-text">门店经营</text>
            </view>
            <view class="manage-list" @tap="goManageItemPage">
                <block v-for="(item, index) in manageList" :key="index">
                    <view class="manage-box" :data-idx="index" :data-url="item.url">
                        <view class="manage-icon-wrap" :data-idx="index" :data-url="item.url">
                            <image class="manage-icon-iamge" :src="item.manageIcon" :data-idx="index"
                                :data-url="item.url" />
                        </view>
                        <text class="manage-text" :data-idx="index" :data-url="item.url">{{ item.manageText }}</text>
                    </view>
                </block>
            </view>
        </view>
        <view class="switch-versions">
            <image class="switch-versions-iamge"
                src="https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/27/d759d825983b4314f67f384febae0f7d.png">
            </image>
            <text class="switch" @tap="switchOldHome">立即切换</text>

        </view>
        <Tabbar activeIdx="0" />
    </view>
</template>

<script>
import Tabbar from '../../component/wxtabbarshop/index';
import Headers from '../../component/header/index';
// pageshop/index/index.js
const app = getApp();

const _request = require('../../utils/request.js'); // 引入require;

export default {
    components: {
        Tabbar,
        Headers
    },
    data() {
        return {
            nickName: '',
            barHeight: 0,
            gohide: true,

            navList: [
                {
                    navIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/27/c8180e63f3ca30d1c9d549ec1748fc51.png',
                    navText: '开单收银',
                    url: '/pagesc/index/index'
                },
                {
                    navIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/27/0f31c03fed928fe37a0eda25dbd808c5.png',
                    navText: '订单核销',
                    url: '/pages/orderlist/index'
                },
                {
                    navIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/27/dc175b10815cfb7d3efafd8b65ebf86b.png',
                    navText: '门店收款码',
                    url: '/pages/collectioncode/index'
                }
            ],

            manageList: [
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/4240736ff8008ad20009cc0adcdc8878.svg',
                    manageText: '预约管理',
                    url: '/pages/order/index'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/2e2c831d76ca159f7bcb69f465885e50.svg',
                    manageText: '员工管理'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/bfd6672f5c848955ec586d194383e0a4.svg',
                    manageText: '排班管理'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/d4888cf797447374774967f58f2b0733.svg',
                    manageText: '会员管理'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/6962a8d8eba0b36633e7e3006cdf2e56.svg',
                    manageText: '交接班'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/cc09ae4896064a96cb63a3dd9a86f8d3.svg',
                    manageText: '服务设置'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/be58afa0c78707edacf5f80663f24d2c.svg',
                    manageText: '门店管理',
                    url: '/pages/shopmanager/index'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/44c12f7bab169f6b1aeedb853f818eb1.svg',
                    manageText: '店铺评价',
                    url: '/pages/evaluation/index'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/adb65178be82c1b6fa728efaa0f6f1f0.svg',
                    manageText: '考勤统计'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/28422cfa7ebc74ddac62c2925f5b44a2.svg',
                    manageText: '考勤管理'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/47a9d7367ecfd218d6b34142463d07b3.svg',
                    manageText: '工作总结'
                },
                {
                    manageIcon: 'https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/store/2022/12/30/7bfc4f1f4c2a014f8f709d90aa2ba4a3.svg',
                    manageText: '作品管理'
                }
            ],

            // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
            globalData: {
                navBarHeight: 0,
                // 导航栏高度
                menuRight: 0,
                // 胶囊距右方间距（方保持左、右间距一致）
                menuTop: 0,
                // 胶囊距底部间距（保持底部间距一致）
                menuHeight: 0 // 胶囊高度（自定义内容可与胶囊高度保证一致）
            },

            bartops: '',
            placeHolderHeight: '',
            show: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
            nickName: uni.getStorageSync('nickName')
        });
        uni.hideHomeButton();
        this.capsule();
        uni.hideHomeButton({
            complete: () => { }
        });
    },
    onShow: function () {
        this.setData({
            nickName: uni.getStorageSync('nickName')
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() { },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() { },
    methods: {
        // 切换旧的首页
        switchOldHome() {
            uni.switchTab({
                url: '/firstpages/home/index'
            });
        },

        goNavItemPage(e) {
            let url = e.target.dataset.url;

            _request
                .get('/cashier/getShops', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.navigateTo({
                            url
                        });
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: '您还没有创建门店',
                            success: function (res) {
                                if (res.confirm) {
                                    // console.log('确定')
                                } else {
                                    // console.log('取消')
                                }
                            }
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //
        goManageItemPage(e) {
            let index = e.target.dataset.idx;
            let url = e.target.dataset.url;

            if (index === undefined) {
                //   点击空白处
                return;
            } else {
                if (!url) {
                    // 没有路径
                    uni.showModal({
                        title: '提示',
                        content: '该功能有待开发，敬请期待'
                    });
                    return;
                }

                uni.navigateTo({
                    url
                });
            }
        },

        capsule() {
            // 获取距上
            const bartops = uni.getSystemInfoSync().statusBarHeight; // 获取胶囊按钮地位信息

            const menuButtonInfo = uni.getMenuButtonBoundingClientRect(); // 获取导航栏高度

            const barHeight = menuButtonInfo.height + (menuButtonInfo.top - bartops) * 2;
            this.setData({
                barHeight,
                bartops,
                placeHolderHeight: barHeight + bartops
            });
        },

        switchDialog() {
            let bool = this.show;
            this.setData({
                show: !bool
            });
        }
    }
};
</script>
<style>
/* pageshop/index/index.wxss */
.page-wrap {
    background-color: #fff;
    height: 100%;
    position: relative;
}

/* 头部功能列表部分 */
.nav-list {
    height: 180rpx;
    display: flex;
    background-color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.nav-box {
    box-shadow: 0px 0px 14px 0px rgba(102, 102, 102, 0.12);
    background-color: #fff;
    border-radius: 10rpx;
    width: 222rpx;
    height: 120rpx;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.nav-icon {
    width: 64rpx;
    height: 64rpx;
}

.nav-text {
    color: #333;
    font-size: 26rpx;
}

/* 门店经营 */
.store-operation {
    position: relative;
    margin: 20rpx 0;
    background-color: #fff;
    border-top: 20rpx solid #f1f1f1;
}

.title-box {
    display: flex;
    align-items: center;
    padding: 40rpx;
    border-bottom: 0.5px solid #e5e5e5;
}

.title-spot {
    width: 8rpx;
    height: 8rpx;
    background-color: #e94a18;
    border-radius: 50%;
    margin-right: 8rpx;
}

.title-text {
    font-size: 30rpx;
}

/* 门店经营下面的图标部分 */
.manage-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.manage-box {
    margin: 30rpx 40rpx;
}

.manage-icon-wrap {
    box-shadow: 0px 0px 10px 0px rgba(211, 51, 1, 0.1);
    background-color: #fff;
    border-radius: 10rpx;
    height: 94rpx;
    width: 94rpx;
    margin-bottom: 6rpx;
}

.manage-icon-iamge {
    width: 50rpx;
    height: 50rpx;
    margin: 22rpx 0 0 22rpx;
    /* border: 1px solid red; */
}

.manage-text {
    font-size: 26rpx;
}

.switch-versions {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;

}

.switch-versions {
    position: absolute;
    bottom: 160rpx;
}

.switch-versions-iamge {
    width: 100%;

    height: 74rpx;
}

.switch-versions .switch {
    position: absolute;
    font-size: 24rpx;
    right: 92rpx;
    top: 47%;
    transform: translateY(-50%);
    color: #e94a18;
}
</style>
